@import './var.scss';

@mixin wic {
    position: relative;

    &::before,
    &::after,
    .wic-arrow-1,
    .wic-arrow-2 {
        position: absolute;
        box-sizing: border-box;
        content: '';
    }
}

@mixin ic-close($color:$grey2, $width:4rpx) {
    &.wic-close::before,
    &.wic-close::after {
        top: 50%;
        width: 100%;
        height: $width;
        margin-top: -($width/2);
        background-color: $color;
    }

    &.wic-close::before {
        transform: rotate(45deg);
    }

    &.wic-close::after {
        transform: rotate(135deg);
    }
}

@mixin ic-refresh($color:$grey2, $border:4rpx) {
    &.wic-refresh {
        box-sizing: border-box;
        border-style: solid;
        border-width: $border;
        border-left-color: transparent;
        border-radius: 50%;
    }

    &.wic-refresh::before {
        position: absolute;
        bottom: 0;
        left: -($border*4) + 2rpx;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: $border*3;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
}

@mixin ic-error($color:#fff, $width:4rpx) {
    &.wic-error::before,
    &.wic-error::after {
        top: 50%;
        width: 100%;
        height: $width;
        margin-top: -($width/2);
        background-color: $color;
    }

    &.wic-error::before {
        transform: rotate(45deg);
    }

    &.wic-error::after {
        transform: rotate(135deg);
    }
}

@mixin ic-warn($color:$cr-warn, $color2:#fff) {
    &.wic-warn::before {
        top: 0;
        left: 0;
        color: $color;
        content: '▲';
    }

    &.wic-warn::after {
        top: 50%;
        left: 50%;
        color: $color2;
        content: '!';
        transform: translateX(-50%) translateY(-50%) scale(0.5);
    }
}

@mixin ic-clear($color:$grey2, $width:4rpx) {
    &.wic-clear::before {
        width: 100%;
        height: 100%;
        border: $width solid $color;
        border-radius: 50%;
    }

    &.wic-clear::after {
        top: 50%;
        width: 100%;
        height: $width;
        margin-top: -($width/2);
        background-color: $color;
        transform: rotate(45deg);
    }
}

@mixin ic-expand-compress($color:$grey2, $width:4rpx) {
    &.wic-compress::before,
    &.wic-compress::after,
    &.wic-compress .wic-arrow-1,
    &.wic-compress .wic-arrow-2,
    &.wic-expand::before,
    &.wic-expand::after,
    &.wic-expand .wic-arrow-1,
    &.wic-expand .wic-arrow-2 {
        width: 40%;
        height: 40%;
        border: $width solid $color;
    }

    &.wic-compress::before,
    &.wic-compress::after,
    &.wic-compress .wic-arrow-1,
    &.wic-compress .wic-arrow-2 {
        transform: rotate(180deg);
    }

    &.wic-compress::before,
    &.wic-expand::before {
        top: 0;
        left: 0;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }

    &.wic-compress::after,
    &.wic-expand::after {
        top: 0;
        right: 0;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    &.wic-compress .wic-arrow-1,
    &.wic-expand .wic-arrow-1 {
        bottom: 0;
        left: 0;
        border-top-color: transparent;
        border-right-color: transparent;
    }

    &.wic-compress .wic-arrow-2,
    &.wic-expand .wic-arrow-2 {
        right: 0;
        bottom: 0;
        border-top-color: transparent;
        border-left-color: transparent;
    }
}
